<template>

	<uni-section title="图标示例" subTitle="点击复制图标类型" type="line">
		<view class="example-body">
			<uni-row class="demo-uni-row" :gutter="gutter" :width="nvueWidth">
				<uni-col :span="8" v-for="(item, index) in list" :key="item.value">
					<view class="demo-uni-col light row-icon" @click="copy(item.value)">
						<uni-icons :type="item.value" size="30"></uni-icons>
						<view>{{item.value}}</view>
					</view>
				</uni-col>
			</uni-row> 
		</view>
	</uni-section>

</template>

<script>
	export default {
		data() {
			return {
				gutter: 0,
				nvueWidth: 730,
				list: [
					{
					value: 'arrow-down'
				}, {
					value: 'arrow-left'
				}, {
					value: 'arrow-right'
				}, {
					value: 'arrow-up'
				}, {
					value: 'down'
				}, {
					value: 'left'
				}, {
					value: 'right'
				}, {
					value: 'up'
				}, {
					value: 'auth'
				}, {
					value: 'auth-filled'
				}, {
					value: 'calendar'
				}, {
					value: 'calendar-filled'
				}, {
					value: 'camera'
				}, {
					value: 'camera-filled'
				}, {
					value: 'cart'
				}, {
					value: 'cart-filled'
				}, {
					value: 'chat'
				}, {
					value: 'chat-filled'
				}, {
					value: 'chatboxes'
				}, {
					value: 'chatboxes-filled'
				}, {
					value: 'chatbubble'
				}, {
					value: 'chatbubble-filled'
				}, {
					value: 'checkbox'
				}, {
					value: 'checkbox-filled'
				}, {
					value: 'circle'
				}, {
					value: 'circle-filled'
				}, {
					value: 'clear'
				}, {
					value: 'close'
				}, {
					value: 'checkmarkempty'
				}, {
					value: 'closeempty'
				}, {
					value: 'cloud-download'
				}, {
					value: 'cloud-download-filled'
				}, {
					value: 'cloud-upload'
				}, {
					value: 'cloud-upload-filled'
				}, {
					value: 'color'
				}, {
					value: 'color-filled'
				}, {
					value: 'contact'
				}, {
					value: 'contact-filled'
				}, {
					value: 'download'
				}, {
					value: 'download-filled'
				}, {
					value: 'email'
				}, {
					value: 'email-filled'
				}, {
					value: 'eye'
				}, {
					value: 'eye-filled'
				}, {
					value: 'eye-slash'
				}, {
					value: 'eye-slash-filled'
				}, {
					value: 'fire'
				}, {
					value: 'fire-filled'
				}, {
					value: 'flag'
				}, {
					value: 'flag-filled'
				}, {
					value: 'folder-add'
				}, {
					value: 'folder-add-filled'
				}, {
					value: 'gear'
				}, {
					value: 'gear-filled'
				}, {
					value: 'gift'
				}, {
					value: 'gift-filled'
				}, {
					value: 'hand-down'
				}, {
					value: 'hand-down-filled'
				}, {
					value: 'hand-up'
				}, {
					value: 'hand-up-filled'
				}, {
					value: 'heart'
				}, {
					value: 'heart-filled'
				}, {
					value: 'help'
				}, {
					value: 'help-filled'
				}, {
					value: 'home'
				}, {
					value: 'home-filled'
				}, {
					value: 'image'
				}, {
					value: 'image-filled'
				}, {
					value: 'images'
				}, {
					value: 'images-filled'
				}, {
					value: 'info'
				}, {
					value: 'info-filled'
				}, {
					value: 'location'
				}, {
					value: 'location-filled'
				}, {
					value: 'locked'
				}, {
					value: 'locked-filled'
				}, {
					value: 'mail-open'
				}, {
					value: 'mail-open-filled'
				}, {
					value: 'map'
				}, {
					value: 'map-filled'
				}, {
					value: 'map-pin'
				}, {
					value: 'map-pin-ellipse'
				}, {
					value: 'medal'
				}, {
					value: 'medal-filled'
				}, {
					value: 'mic'
				}, {
					value: 'mic-filled'
				}, {
					value: 'micoff'
				}, {
					value: 'micoff-filled'
				}, {
					value: 'minus'
				}, {
					value: 'minus-filled'
				}, {
					value: 'more'
				}, {
					value: 'more-filled'
				}, {
					value: 'navigate'
				}, {
					value: 'navigate-filled'
				}, {
					value: 'notification'
				}, {
					value: 'notification-filled'
				}, {
					value: 'paperplane'
				}, {
					value: 'paperplane-filled'
				}, {
					value: 'person'
				}, {
					value: 'person-filled'
				}, {
					value: 'personadd'
				}, {
					value: 'personadd-filled'
				}, {
					value: 'phone'
				}, {
					value: 'phone-filled'
				}, {
					value: 'plus'
				}, {
					value: 'plus-filled'
				}, {
					value: 'redo'
				}, {
					value: 'redo-filled'
				}, {
					value: 'refresh'
				}, {
					value: 'refresh-filled'
				}, {
					value: 'refreshempty'
				}, {
					value: 'reload'
				}, {
					value: 'settings'
				}, {
					value: 'settings-filled'
				}, {
					value: 'shop'
				}, {
					value: 'shop-filled'
				}, {
					value: 'smallcircle'
				}, {
					value: 'smallcircle-filled'
				}, {
					value: 'sound'
				}, {
					value: 'sound-filled'
				}, {
					value: 'staff'
				}, {
					value: 'staff-filled'
				}, {
					value: 'trash'
				}, {
					value: 'trash-filled'
				}, {
					value: 'tune'
				}, {
					value: 'tune-filled'
				}, {
					value: 'undo'
				}, {
					value: 'undo-filled'
				}, {
					value: 'upload'
				}, {
					value: 'upload-filled'
				}, {
					value: 'videocam'
				}, {
					value: 'videocam-filled'
				}, {
					value: 'vip'
				}, {
					value: 'vip-filled'
				}, {
					value: 'wallet'
				}, {
					value: 'wallet-filled'
				}, {
					value: 'back'
				}, {
					value: 'forward'
				}, {
					value: 'bars'
				}, {
					value: 'compose'
				}, {
					value: 'font'
				}, {
					value: 'headphones'
				}, {
					value: 'link'
				}, {
					value: 'list'
				}, {
					value: 'loop'
				}, {
					value: 'paperclip'
				}, {
					value: 'plusempty'
				}, {
					value: 'pulldown'
				}, {
					value: 'weixin'
				}, {
					value: 'weibo'
				}, {
					value: 'pyq'
				}, {
					value: 'qq'
				}, {
					value: 'scan'
				}, {
					value: 'search'
				}, {
					value: 'spinner-cycle'
				}, {
					value: 'star'
				}, {
					value: 'star-filled'
				}, {
					value: 'starhalf'
				}] 
			}
		},
			methods: {
				copy(e){
					uni.setClipboardData({
						data: e,
						success: function () {
							uni.showToast({
								title: '复制成功',
								duration: 500
							});
						}
					});
				},
				// goDetailPage(e) {
				// 	const url = '/pages/component/' + e + '/' + e
				// 	uni.navigateTo({
				// 		url: url
				// 	})
				// }
			}
	}
</script>

<style lang="scss">
	.demo-uni-row {
		margin-bottom: 10px;

		// 组件在小程序端display为inline
		// QQ、抖音小程序文档写有 :host，但实测不生效
		// 百度小程序没有 :host
		/* #ifdef MP-TOUTIAO || MP-QQ || MP-BAIDU */
		display: block;
		/* #endif */
	}

	// 支付宝小程序没有 demo-uni-row 层级
	// 微信小程序使用了虚拟化节点，没有 demo-uni-row 层级
	/* #ifdef MP-ALIPAY || MP-WEIXIN */
	::v-deep .uni-row {
		margin-bottom: 10px;
	}

	/* #endif */

	.demo-uni-col {
		height: 36px;
		border-radius: 5px;
	}

	.dark_deep {
		background-color: #99a9bf;
	}

	.dark {
		background-color: #d3dce6;
	}

	.light {
		background-color: #e5e9f2;
	}

	.example-body {
		/* #ifndef APP-NVUE */
		display: block;
		/* #endif */
		padding: 5rpx 10rpx 0;
		overflow: hidden;
	}

	.row-icon {
		height: 120rpx;
		text-align: center;
		padding-top: 30px;
	}
</style>